<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>">
		<!--[if lte IE 6]></base><![endif]-->
	
		<title>广东科学技术职业学院考生报到系统<s:property value="%{#session.college.collegesName}"/></title>

		<meta http-equiv="pragma" content="no-cache"/>
		<meta http-equiv="cache-control" content="no-cache"/>
		<meta http-equiv="expires" content="0"/>

		<link rel="stylesheet" href="css/jquery-ui-1.8.5.custom.css" type="text/css" />
		<link href="css/newindex.css" rel="stylesheet" type="text/css" />
		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
		<script src="js/jquery-1.5.js" language="javascript">
</script>
		<script src="js/newpublic.js" language="javascript"></script>
		<script src="js/table.js" language="javascript"></script>
<script src="js/jquery-ui-1.8.5.custom.min.js" language="javascript">
</script>

		<script language="javascript" type="text/javascript" src="js/jquery.flot.js"></script>

		<!--                     下面是柱状图所要用到的两个文件         -->

		<script language="javascript" type="text/javascript" src="js/Bar-chart.js"></script>

		<!-- 下面是饼图所要用到的两个文件 -->
		<script type="text/javascript" src="js/jquery.flot.pie.min.js">
</script>
		<script type="text/javascript" src="js/Pie-chart.js">
</script>
		<script src="js/jquery-ui-1.8.5.custom.min.js" language="javascript">
</script>

		<script language="javascript">
var registerPie = new PieChart(); //专业报道饼图对象
var paymentPie = new PieChart(); //专业缴费饼图对象
var registerBarchart = new BarChart();  //各班级报道情况柱状图
var paymentBarchart = new BarChart();  //各班级缴费情况柱状图		

var profession;  //专业ID
var index;  //当前显示的div

$(function() {
	$("#content").draggable({cancel:".contable"});
	//动态加载logo
	$("#content .subjectlogo").css("background-image","url(<%=basePath%>/newimages/${sessionScope.college.collegeLogo})");
	
	index = 1; 
	initSelect();
	
	$("#professionList").change(function() {
		profession = $("#professionList").val();
		$("#professionName").html($("#professionList").find("option:selected").text());
		getData(index);
	})
})

//初始化专业名称栏	
function initSelect() {

	$.post("json/professionQueryAction!queryProfessionName", function(data) {
		$("#collegeName").html(data.collegeName);
		data = eval("(" + data.professionNameList_Json + ")");
		$("#professionList").empty();
		for (i = 0; i < data.length; i++) {
			$("#professionList").append(
					"<option value='" + data[i].professionId + "'>"
							+ data[i].professionName + "</option>");
		}
		profession = $("#professionList").val();
		$("#professionName").html($("#professionList").find("option:selected").text());
		getData(index);
	})
}

//获取数据
function getData(index) {
	switch(index) {
		case 1:
			$.post("json/professionQueryAction!professionRegisterPieData", {'professionId' : profession,'date':new Date()}, 
				function(data) {
					professionRegister_Pie = eval("(" + data.professionRegister_Pie + ")");
					registerPie.buildPieChart($("#placeholderForPie"), professionRegister_Pie,null);
				})
			break;
		case 2:
			$.post("json/professionQueryAction!professionPaymentPieData", {'professionId' : profession}, 
				function(data) {
					professionPayment_Pie = eval("(" + data.professionPayment_Pie + ")");
					paymentPie.buildPieChart($("#placeholderForPie2"), professionPayment_Pie, null);
				})
			break;
		case 3:
			$.post("json/professionQueryAction!clazzRegisterInfoData", {'professionId' : profession}, 
				function(data) {
					clazzRegisterInfo = eval("(" + data.clazzRegisterInfo + ")");
					clazzRegisterInfo_Bar = eval("(" + data.clazzRegisterInfo_Bar + ")");
					fillRegisterInfo(clazzRegisterInfo);
					registerBarchart.buildBarsChart($("#placeholderForBars"), $("#lengendForBars"), clazzRegisterInfo_Bar);
				})
			break;
		case 4:
			$.post("json/professionQueryAction!clazzPaymentInfoData", {'professionId' : profession}, 
				function(data) {
					clazzPaymentInfo = eval("(" + data.clazzPaymentInfo + ")");
					clazzPaymentInfo_Bar = eval("(" + data.clazzPaymentInfo_Bar + ")");
					fillPaymentInfo(clazzPaymentInfo);
					paymentBarchart.buildBarsChart($("#placeholderForBars2"), $("#lengendForBars2"), clazzPaymentInfo_Bar);
				})
			break;
	}
}

function update() {
	getData(index);
}

//填充各班级报道情况数据
function fillRegisterInfo(data) {
	//徐了第一列外其余td删除
	$("tr#clazzList_reg td:gt(0)").remove();
	$("tr#studentCount td:gt(0)").remove();
	$("tr#registeredCount td:gt(0)").remove();
	
	for(var a in data) {
		var td = $("<td align='center' width='" + 85/data.length + "%'>" + data[a].clazzName + "</td>")
		$("#clazzList_reg").append(td);
		
		var td = $("<td align='center'>" + data[a].studentCount + "</td>")
		$("#studentCount").append(td);
		
		var td = $("<td align='center'>" + data[a].registeredCount + "</td>")
		$("#registeredCount").append(td);
	}
}

//填充各班级缴费情况数据
function fillPaymentInfo(data) {
		//徐了第一列外其余td删除
	$("tr#clazzList_pay td:gt(0)").remove();
	$("tr#totalAmount td:gt(0)").remove();
	$("tr#realAmount td:gt(0)").remove();
	$("tr#paidAmount td:gt(0)").remove();
	$("tr#unPaidAmount td:gt(0)").remove();
	
	for(var a in data) {
		var td = $("<td align='center' width='" + 85/data.length +"%'>" + data[a].clazzName + "</td>")
		$("#clazzList_pay").append(td);
		
		var td = $("<td align='center'>" + data[a].totalAmount + "</td>")
		$("#totalAmount").append(td);
		
		var td = $("<td align='center'>" + data[a].realAmount + "</td>")
		$("#realAmount").append(td);
		
		var td = $("<td align='center'>" + data[a].paidAmount + "</td>")
		$("#paidAmount").append(td);
		
		var td = $("<td align='center'>" + data[a].unPaidAmount + "</td>")
		$("#unPaidAmount").append(td);
	}
}

function s(s) {
	for ( var i = 1; i <= 4; i++)
		$('#t' + i).css('display', 'none');
	$('#t' + s).css('display', 'block');
	index = s;
	getData(index);
}
</script>
		<style>
#menutop li:hover {
	background-image: url(images/menu_bg.jpg);
	cursor: pointer;
}
</style>


	</head>

	<body onload="fixPNGAll()">
		<jsp:include page="common_head.jsp" />
				<div id="content">
					<!--当前位置CSS-->
					<div class="top">
						<div class="topleft">
							<div class="dan">
								<div>
									当前位置>招生概况>专业概况
								</div>
							</div>
							<div class="F5">
								<img src="newimages/F5.png" />
							</div>
						</div>
						<div class="topright">
							<div class="toprightmin"></div>
							<div class="toprightmax"></div>
							<div class="toprightclose" onclick="if(confirm('是否确定退出！')){location.replace('loginoutAction')}" title="点击退出"></div>
						</div>
					</div>
					<!---->
					<!--内容-->
					<div class="condiv">
						<div class="subjectlogo">
							<!--每学院Logo-->
							<div class="submenu">
								<ul>
									<li>
										<a href="scoreStatisticsAction">成绩统计</a>
									</li>
									<li>
										<a href="professionSelectAction">专业概况</a>
									</li>
									<li>
										<a href="yardSelectAction">院级概况</a>
									</li>
									<li>
										<a href="schoolSelectAction">校级概况</a>
									</li>
								</ul>
							</div>
							<div class="contable">
								<div class="contable">
									<div class="title">
										专业概况
									</div>
									<!-- 表格，从数据库读取数据 -->
									<div>
										<table width="80%" border="0" align="center" cellpadding="1"
											cellspacing="5">
											<tr>
												<td width="25%">
													专业名称：
													<select name="" id="professionList">
														<option value="0">
															信管
														</option>
														<option value="1">
															网络
														</option>
														<option>
															多媒体
														</option>
														<option>
															软件专业
														</option>
													</select>
												</td>
												<!--
    <td>班级：<select id="op2">
                                                          <option>选择专业</option>
                                                          
                                                        </select></td>
-->
												<td width="65%" align="right">
													<input name="" type="button" value="刷新" onclick="update()" />
												</td>
											</tr>
										</table>

										<table width="573" border="0" align="center" cellpadding="1"
											cellspacing="5" class="table">
											<tr>
												<td width="163" align="center" style="font-size: 16px;">
													<a href="javascript:s(1)">专业报到率</a>
												</td>
												<td width="106" align="center" style="font-size: 16px;">
													<a href="javascript:s(2)">专业缴费率</a>
												</td>
												<td width="133" align="center" style="font-size: 16px;">
													<a href="javascript:s(3)">各班级报到率</a>
												</td>
												<td width="138" align="center" style="font-size: 16px;">
													<a href="javascript:s(4)">各班级缴费率</a>
												</td>
											</tr>
										</table>


										<div id="t1">
										<table width="80%" border="0" align="center" cellpadding="1"
											cellspacing="5">
											<tr>
												<td>
											
												</td>
											</tr>
											<tr>
												<td style="font-size: 12px; color: red;">
													&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新生总体报到率
												</td>
											</tr>
											<tr>
												<td align="center">
													<div id="placeholderForPie"
														style="width: 650px; height: 300px; float: left"></div>
												</td>
											</tr>
										</table>
										</div>

										<div id="t2" style="display: none;">
										<table width="80%" border="0" align="center" cellpadding="1"
											cellspacing="5">
											<tr>
												<td>
								
												</td>
											</tr>
											<tr>
												<td style="font-size: 12px; color: red;">
													&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新生总体缴费率
												</td>
											</tr>
											<tr>
												<td align="center">
													<div id="placeholderForPie2"
														style="width: 600px; height: 300px; float: left"></div>
												</td>
											</tr>
										</table>
										</div>


										<div id="t3" style="display: none;">
										<table width="80%" border="0" align="center" cellpadding="1"
											cellspacing="5">
											<tr>
												<td>
							
												</td>
											</tr>
											<tr>

												<tr>
													<td>
														<table width="93%" border="0" cellspacing="5"
															cellpadding="0" align="center">
															<tr id="clazzList_reg">
																<td width="15%">
																	&nbsp;
																</td>
															</tr>
															<tr id="studentCount">
																<td align="center">
																	总人数
																</td>
															</tr>

															<tr id="registeredCount">
																<td align="center">
																	已报到人数
																</td>
															</tr>
														</table>


													</td>
												</tr>


												<td style="font-size: 12px; color: red;">
													&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;各班级报到率
												</td>
											</tr>
											<tr>
												<td align="center">
													<div id="placeholderForBars"
														style="width: 550px; height: 300px; float: left;"></div>
													<div id="lengendForBars" style="float: right; width: 150px"></div>
												</td>
											</tr>
										</table>
										</div>
										<div  id="t4" style="display: none;">
										<table width="100%" border="0" align="center" cellpadding="1"
											cellspacing="5">
											<tr>
												<td>
						
												</td>
											</tr>

											<tr>
												<td>
													<table width="100%" border="0" cellspacing="4"
														cellpadding="0">
														<tr id="clazzList_pay">
															<td align="center" width="15%">
																&nbsp;
															</td>
														</tr>
														<tr id="totalAmount">
															<td align="center">
																总缴费数目：
															</td>
														</tr>
														<tr id="realAmount">
															<td align="center">
																实际总缴费数目：
															</td>
														</tr>
														<tr id="paidAmount">
															<td align="center">
																已缴费数目：
															</td>
														</tr>
														<tr id="unPaidAmount">
															<td align="center">
																总欠费数目：
															</td>
														</tr>
													</table>
												</td>
											</tr>


											<tr>
												<td style="font-size: 12px; color: red;">
													&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;各班级缴费率
												</td>
											</tr>
											<tr>
												<td align="center">
													<div style="width: 80%">
													<div id="placeholderForBars2"
														style="width: 550px; height: 300px; float: left;"></div>
													<div id="lengendForBars2" style="float:right; width: 150px"></div>
													</div>
												</td>
											</tr>
										</table>
										</div>
									</div>



									<!-- 表格，从数据库读取数据结束 -->
								</div>
							</div>
						</div>
					</div>

					<div class="condiv"
						style="width: 997px; position: relative; height: 20px; min-height: 20px; text-align: center;">
						<a href="computer/computer.html" target="_blank">计算机学院程序员之家</a>
					</div>

					<!--低部-->
					<div class="bottom">
						&nbsp;
					</div>

				</div>
			</div>
		</div>
	</body>

</html>
